<template>
  <div class="card-box">
    <div class="card-top">
      <img :src="Cards.coverImgUrl" alt="" />
      <div class="top-time">{{Cards.createTime | formate}}更新</div>
      <div class="top-play">
          <i class="el-icon-video-play"></i>
      </div>
    </div>
    <div class="card-list flex" v-for="(item,index) in SongList" :key="index" :class="index==0?'':'card-listone'">
      <div class="left text-one">
        <span style="color:red;padding-right:5px;font-weight:900;font-size:16px">{{index+1}}</span>
        <span>{{item[0].al.name}}</span>
      </div>
      <div class="right text-one">{{item[0].ar[0].name}}</div>
    </div>
    <div class="card-bottom">查看全部</div>
  </div>
</template>

<script>
import { getphangList,getphangListDetail } from "@/network/phang";
import {formatDateTime} from '@/common/common'
export default {
  name: "PhangCard",
  props: {
    Cards: {
      type: Object,
    },
  },
  data(){
     return{
         listData:this.Cards,
         SongList:[],
     }
  },
  created() {//获取网络请求  Cards id
  //父组件通过props传递数据，再到子组件中根据props中的数据在发送网络请求，
  //注意：父组件中的props的值
    // this. getList(id)

    /*重点：面试题
    通过创建子组件来实现效果,但是注意了传递过去的值是一个对象。在create,mounted获取不到props中的值， 
    出现这种请求的原因： 因为父组件中传递的`props`属性 是通过发生`ajax`请求回来的,
    请求的这个过程是需要时间的，但是**子组件的渲染要快于ajax请求过程**，
    所以此时 `created 、mounted`这样的只会执行一次的生命周期钩子，已经执行了，
    但是`props`还没有流进来（子组件），所以只能拿到默认值。

    解决方法: 监听 props中 的值，当它由空转变有值时就会触发，这时候就能取到了，
    拿到值后要做的处理方法也需要在 watch 里面执行 
*/
  },
  //监听
  watch:{
      Cards:function(val,oldValue){//val  最新的值    oldvalue  旧的值
       this. getList(val.id)
      }
  },
  //过滤器
  filters:{//处理时间格式  创建过滤器format
      formate:function(val){//val 处理的数据  1404115136883  日  时
          //处理方法
          const timeData = formatDateTime(val)
          return timeData
    } 
  },
  methods: {
    getList(id) {
      getphangList("/playlist/detail",{id:id}).then(res=>{
        //   console.log(res)//只是榜单中的id表
          //获取  获取榜单中的详细信息  id  一次要获取到8个
        //   this. getDetailSong(res.privileges[0].ids)
          const listid = res.privileges.splice(0,8)
          listid.map((item)=>{
              this. getDetailSong(item.id)
          })
      });
    },
    //获取榜单中的详细信息
    getDetailSong(ids){
          getphangListDetail('/song/detail',{ids:ids}).then(res=>{
            //   console.log(res)
              this.SongList.push(res.songs)
          })
    }
  },
};
</script>

<style scoped lang='less'>
.card-box {
  width: 270px;
  border: 1px solid #ccc;
  cursor: pointer;
  .card-top {
    width: 100%;
    height: 140px;
    position: relative;
    img {
      height: 100%;
      width: 100%;
    }
    .top-play{
      position: absolute;
      width: 30px;
      height: 30px;
      font-size: 30px;
      border-radius: 50%;
      right: 4px;
      bottom: 8px;
      color: #fff;
    }
    .top-time{
      position: absolute;
      bottom: 8px;
      left: 10px;
      color: #fff;
    }
  }
  .card-list{
      height: 26px;
      background: #fff;
      font-size: 12px;
      color: #666;
      padding: 2px 10px;
      line-height: 20px;
  }
  .card-list:hover{
      background: #f5f5f7;
  }
  //
  .card-listone{
      height: 26px;
      background:#e3e3e5 ;
      color: #666;
      padding: 4px 10px;
  }
  .card-bottom{
      height: 25px;
      line-height: 25px;
      text-align: right;
      padding: 0 10px;
      font-size: 14px;
      font-weight:900;
      color: rgb(39, 10, 107);
      font-family: 宋体;
  }
}
</style>